<template lang="html">
  <section @touchmove.prevent="">
    <x-dialog v-model="showReport" class="dialog-report">
      <div class="pad-20">
        <h3 class="report-title">哪里有问题？</h3>
        <p class="report-hint">投诉举报必须真实客观，提交虚假/恶意诋毁举报信息将承担相应的法律责任，并计入诚信档案</p>
        <ul class="report-box">
          <li
            v-for="(item, index) in reportList"
            class="report-label"
            :class="{active: labels.indexOf(item) > -1}"
            @click="clickLabel(index)">{{item}}</li>
        </ul>
        <group>
          <x-textarea placeholder="添加留言..." v-model="hcentent" :show-counter="false"></x-textarea>
        </group>
      </div>
      <x-button type="primary" @click.native="submit">提交</x-button>
      <i class="icon icon-close" @click="$emit('hide')"></i>
    </x-dialog>
  </section>
</template>

<script>
import { XTextarea } from 'vux'
export default {
  components: {
    XTextarea
  },
  props: {
    showReport: {
      type: Boolean,
      default: false
    },
    /**
     * 房源数据
     * trueName: 用户真实姓名
     * mobile: 用户联系方式
     * idCard: 用户身份证
     * landlordname: 房东名字
     * landlordMobile: 房东联系方式 // 非必填
     * htitle: 房源标题
     */
    data: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      reportList: ['房源已出租', '信息不正确', '电话没打通', '房东是中介'], // 举报按钮
      labels: [], // 选中的举报标签
      hcentent: '' // 举报留言
    }
  },
  methods: {
    clickLabel (index) {
      let newLabel = this.reportList[index]
      let labelIndex = this.labels.indexOf(newLabel)
      if (labelIndex > -1) {
        this.labels.splice(labelIndex, 1)
      } else {
        this.labels.push(newLabel)
      }
    },
    checkData (data) {
      if (!data.trueName) {
        this.$vux.toast.text('用户真实姓名不能为空')
        return false
      } else if (!data.mobile) {
        this.$vux.toast.text('用户手机不能为空')
        return false
      } else if (!data.idCard) {
        this.$vux.toast.text('用户身份证不能为空')
        return false
      } else if (data.type === '1' && !data.landlordname) {
        this.$vux.toast.text('房东姓名不能为空')
        return false
      } else if (data.type === '1' && !data.landlordMobile) {
        this.$vux.toast.text('房东联系方式不能为空')
        return false
      } else if (!data.htitle) {
        this.$vux.toast.text('房源标题不能为空')
        return false
      } else if (!data.hlabel) {
        this.$vux.toast.text('请选择投诉标签')
        return false
      }
      return true
    },
    submit () {
      let data = {
        ...this.data,
        hlabel: this.labels.join(','),
        hcentent: this.hcentent
      }
      if (this.checkData(data)) {
        this.$axiosPosting(this.$api.addHouseComplain, data).then(res => {
          this.labels = []
          this.hcentent = ''
          this.$emit('hide')
          var tip = res.code === '0000' ? '提交成功' : res.msg
          this.$vux.toast.text(tip)
        })
      }
    }
  }
}
</script>

<style lang="less">
.dialog-report{
  .weui-dialog{
    box-sizing: border-box;
    color: #343434;
    text-align: left;
    overflow: initial;
    margin-top: -30px;
  }
  .pad-20{
    padding: 0 20px;
    box-sizing: border-box;
  }
  .report-title{
    line-height: 60px;
    font-size: 16px;
    color: #000;
    text-align: center;
  }
  .report-hint{
    font-size: 12px;
    line-height: 20px;
    color: #777;
  }
  .report-box{
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 1;
    margin-top: 20px;
    margin-bottom: 13px;
    .report-label{
      width: 49%;
      height: 30px;
      margin-right: 2%;
      margin-bottom: 9px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
      color: #bbb;
      border: 1px solid #bbb;
      box-sizing: border-box;
      border-radius: 3px;
      &.active{
        color: #ff9600;
        border-color: #ff9600;
      }
      &:nth-of-type(2n){
        margin-right: 0;
      }
    }
  }
  .weui-cell{
    font-size: 12px;
    margin-bottom: 15px;
    border-radius: 2px;
    border: 1px solid #bbb;
  }
  .icon-close{
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    bottom: -63px;
    left: 0;
    right: 0;
    margin: auto;
    background: url('../../../images/icon_close.png') center no-repeat;
    background-size: 100%;
  }
}
</style>
